<template>
	<view>
		<view class="info">
			<image class="avatar" :src="userInfo.avatarUrl"></image>
			<text class="text">
				{{userInfo.nickname}}
			</text>
			<text class="score">
				积分：{{userInfo.score}}
			</text>
			<button class="button" type="primary" size="mini" @click="onToEdit">编辑个人信息</button>
		</view>
		<view class="weui-input">
			<text class="text" v-if="userInfo.userType === 1">
				家长码:{{userInfo.patriarchCode}}
			</text>
		</view>

		<view class="extra">
			<button class="item icon-arrow" @click="onExchange()">
				兑换记录
			</button>
			<button class="item icon-arrow" @click="onScoreDetail()">
				积分明细
			</button>
			<button class="item icon-arrow" v-if="userInfo.userType === 1" @click="onRelation()">
				小孩列表
			</button>
			<button class="item icon-arrow" v-if="userInfo.userType === 2" @click="onRelation()">
				父母信息
			</button>
			<button class="item icon-arrow" @click="onAfficheList()">
				版本日志
			</button>
			<button open-type="feedback" class="item icon-arrow">意见反馈</button>
		</view>

	</view>
	<view style="margin-left: 30rpx;margin-top: 50rpx">版本号：{{version}}体验版</view>
</template>

<script>
	import {
		publicUserScore,
		publicAfficheList
	} from '@/api/api.js'
	import {
		onToken
	} from '@/utils/token.js'
	import store from '@/store/index.js'; //需要引入store
	export default {
		data() {
			return {
				defaultAvatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
				userInfo: {
					avatarUrl: store.state.avatarUrl,
					nickname: store.state.nickName,
					genderCode: store.state.gender,
					userType: store.state.userType,
					patriarchCode: store.state.patriarchCode,
					score: 0,
				},
				version: "",
				token: "",
			}
		},
		onLoad() {
			onToken()
			this.loadVersion()
			this.loadUserScore()
		},
		onTabItemTap() {
			console.log(this.userInfo.userType)
			if (this.userInfo.userType > 0) {
				uni.reLaunch({
					url: '/pages/user/user'
				});
			}
		},
		methods: {
			onAfficheList() {
				uni.navigateTo({
					url: '/pages/user/user_affiche_list'
				});
			},
			onToEdit() {
				uni.navigateTo({
					url: '/pages/user/user_info'
				});
			},
			onExchange() {
				uni.navigateTo({
					url: '/pages/user/user_exchange'
				});
			},
			onRelation() {
				uni.navigateTo({
					url: '/pages/user/user_ralation_list'
				});
			},
			onScoreDetail() {
				uni.navigateTo({
					url: '/pages/user/user__score_detail'
				});
			},
			loadVersion() {
				publicAfficheList().then(res => {
					console.log(res.data)
					if (res.data.code != 0) {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					} else {
						this.version = res.data.data.currently_version
					}
				})
			},
			loadUserScore() {
				publicUserScore().then(res => {
					console.log(res.data)
					if (res.data.code != 0) {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					} else {
						this.userInfo.score = res.data.data
					}
				})

			},
		},
	}
</script>

<style lang="scss">
	.weui-input {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		height: 100rpx;
		display: flex;

		.text {
			margin-top: 30rpx;
			margin-left: 50rpx;
		}
	}

	.info {
		margin-top: 50rpx;

		.avatar {

			border-radius: 100px;
			width: 56px;
			height: 56px;
			margin-left: 50rpx;
		}

		.text {
			position: absolute;
			margin-left: 30rpx;
			margin-top: 20rpx;
		}

		.score {
			position: absolute;
			margin-left: 150rpx;
			margin-top: 20rpx;
		}

		.button {
			position: absolute;
			margin-left: 350rpx;
			margin-top: 20rpx;
		}
	}

	.extra {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 4rpx;

		.item {
			line-height: 1;
			padding: 25rpx 0 25rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;
			color: #333;
		}

		button {
			text-align: left;
			background-color: #fff;

			&::after {
				border: none;
				border-radius: 0;
			}
		}
	}
</style>